<template>
	<view class="">
		<view class="nav_top-bg">
			<u-navbar title="设置">
				<view class="u-nav-slot" slot="left">
					<u-icon name="arrow-left" @click="go_black" size="19"></u-icon>
					<u-line direction="column" :hairline="false" length="16" margin="0 10px"></u-line>
					<u-icon name="home" @click="goHome" size="20"></u-icon>
				</view>
			</u-navbar>
		</view>
		<view class="">
			<view class="avatar">
				<text class="touxtxt">头像</text>
				<view class="righttx">
					<u-avatar size="40px" shape="circle" :src="user.avatar" @click="avatar_click"></u-avatar>
					<image class="youcejt" src="../../static/index/more.png" mode="widthFix"></image>
				</view>
			</view>

			<view class="avatar">
				<text class="touxtxt">昵称</text>
				<view class="righttx">
					<input class="ipt" type="text" placeholder="请输入昵称" v-model="user.nickname">
				</view>
			</view>
			<!-- <view class="avatar">
				<text class="touxtxt">身份选择</text>
				<view class="righttx d-flex align-items" @tap="choose_identity">
					<view class="top-txt">{{shenfen}}</view>
					<image class="qm" src="../../static/index/more.png" mode="widthFix"></image>
				</view>
			</view> -->
			<view class="avatar">
				<text class="touxtxt">地区</text>
				<view class="righttx d-flex align-items" @tap="chooseCity()">
					<view class="top-txt">{{adress}}</view>
					<image class="qm" src="../../static/index/more.png" mode="widthFix"></image>
				</view>
			</view>
		</view>
		<view class="foot-btn">
			<view class="liji-btn">
				<u-button shape="circle" color="#FF6400" @click="submit" text="保存"></u-button>
			</view>
		</view>
		
		<!-- 选择身份 -->
		<view class="">
			<u-picker :show="show" @confirm="confirm" @cancel="show = false" :columns="columns"
				keyName="label"></u-picker>
		</view>
		<!-- 选择地区 -->
		<u-picker :show="showcity" ref="uPicker" @cancel="showcity = false" :columns="columns_city" @confirm="confirm_city"
			@change="changeHandler" keyName="t_name"></u-picker>
	</view>
</template>

<script>
	import {
		User_detail,
		setUserInfo
	} from '@/api/user.js'
	import {
		upFile
	} from '@/utils/url.js'
	import {
		url
	} from '@/utils/url.js'
	import {
		tree
	} from '@/api/citys.js'
	import util from '@/utils/util.js'
	export default {
		data() {
			return {
				nickname: '请输入昵称',
				shenfen: '请选择',
				adress: '请选择',
				cityname: '',
				shiname: '',
				quname: '',
				shiid: '',
				quid:'',
				shengid: '',
				columns_city: [],
				user: {},
				avatar: '',//域名头像
				full_avatar: '',
				show: false,
				columns: [
					[{
						label: '雇主',
						id: 0
					}, {
						label: '设计师',
						id: 1
					}, {
						label: '个人',
						id: 2
					}]
				],
				showcity:false,
				columns_city:[],
				token:'',
			}
		},
		async onLoad() {
			this.get_userdetail()
			await this.getProvinces()
			this.token = uni.getStorageSync('token')
		},
		methods: {
			// 获取用户详细
			get_userdetail() {
				var data = {
					token: uni.getStorageSync('token')
				}
				User_detail(data).then(res => {
					console.log("获取用户详细为：", res);
					if (res.code == 1) {
						this.user = res.data.user
						this.adress = res.data.user.province + '/' + res.data.user.city + '/' + res.data.user.area
					}
				})
			},
			go_black() {
				uni.navigateBack({
					delta: 1
				})
			},
			goHome() {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			// 选择身份
			choose_identity() {
				this.show = true
			},
			// 确认身份
			confirm(e) {
				console.log('confirm', e)
				this.shenfen = e.value[0].label
				this.show = false
			},
			
			chooseCity() {
				console.log("eeeee", this.columns_city);
				this.showcity = true
			},
			// 省市区
			changeHandler(e) {
				const {
					columnIndex,
					value,
					values,
					index,
					indexs,
					picker = this.$refs.uPicker
				} = e
				if (columnIndex === 0) {
					picker.setColumnValues(1, this.columns_city[0][index].children)
					picker.setColumnValues(2, this.columns_city[0][index].children[0].children)
				}
				if (columnIndex === 1) {
					console.log(e, indexs);
					// picker为选择器this实例，变化第二列对应的选项
					picker.setColumnValues(2, this.columns_city[0][indexs[0]].children[indexs[1]].children)
				}
				console.log("columnIndex", columnIndex);
			},
			confirm_city(e) {
				this.shengid = e.value[0].id
				this.shiid = e.value[1].id
				this.quid = e.value[2].id
				this.cityname = e.value[0].name
				this.shiname = e.value[1].name
				this.quname = e.value[2].name
				this.adress = this.cityname + '/' + this.shiname + '/' + this.quname
				this.showcity = false
			},
			// 获取省市县接口数据
			async getProvinces() {
				var data = {
					pid: 0
				}
				await tree(data).then(res => {
					console.log("选择了第几个", res);
					if (res.code == 1) {
						this.columns_city[0] = res.data
						this.columns_city[1] = res.data[0].children
						this.columns_city[2] = res.data[0].children[0].children
					}
			
				})
			},
			// 长传头像
			avatar_click() {
				var that = this
				uni.chooseImage({
					count: 1,
					// sourceType: [''],
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					success: async (res) => {
						for (let i = 0; i < res.tempFilePaths.length; i++) {
							uni.getImageInfo({
								src: res.tempFilePaths[i],
								success: image => {
									let obj = {
										token: uni.getStorageSync('token')
									}
									// console.log('uploadFile arr', obj);
									uni.uploadFile({
										url: url + '/addons/jieziuser/api/upload',
										filePath: image.path,
										name: 'file',
										formData: obj,
										success(res) {
											console.log('upload_select-------', res);
											if (res.statusCode == 200) {
												let result = JSON.parse(res.data)
												console.log('result++++++++++', result.data);
												if (result.code == 1) {
													that.user.fullavatar = result.data.url
													that.user.avatar = result.data.fullurl
												} else {
													uni.showToast({
														title: result.msg,
														icon: 'none'
													})
												}
											} else {
												uni.showToast({
													title: '接口返回异常'
												})
											}
										},
										fail(err) {
											console.log('upload_select upload err', err);
										}
									})
								}
							})
						}
					}
				})
			},
			// 提交修改数据
			submit(){
				var data = {
					token: this.token,
					nickname: this.user.nickname,
					avatar: this.user.fullavatar,
					province_id:this.shengid,
					city_id:this.shiid,
					area_id:this.quid,
				}
				setUserInfo(data).then(res => {
					console.log("修改个人信息",res);
					if (res.code == 1) {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
						uni.navigateBack({
							delta: 1
						})
					} else {
						uni.showToast({
							title: res.msg,
							icon: 'none'
						})
					}
				})
			},
		}
	}
</script>

<style>
	.foot-btn{
		position: fixed;
		bottom: 80rpx;
		width: 750rpx;
		margin: auto;
	}
	.liji-btn {
		width: 630rpx;
		margin: auto;
		margin-top: 100rpx;
	}
	.youcejt {
		width: 12rpx;
		display: block;
		margin-left: 20rpx;
	}

	.ipt {
		font-size: 30rpx;
		font-weight: normal;
		text-align: right;
		color: #333333;
	}

	.qm {
		width: 12rpx;
		display: block;
		margin-left: 10rpx;
	}

	.righttx {
		display: flex;
		align-items: center;
	}

	.touxtxt {
		font-size: 30rpx;
		font-weight: normal;
		display: block;
		color: #333333;
	}

	.avatar {
		width: 690rpx;
		border-bottom: 1px solid #f5f5f5;
		height: 110rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: auto;
	}
</style>